<template>
  <div id="container" v-show="mapShow"></div>
</template>

<script>
export default {
  data () {
    return {
      mapShow:true,
    }
  },
  methods: {
    init(x,y) {
      var center = new qq.maps.LatLng(x,y);
      var map = new qq.maps.Map(document.getElementById('container'),{
          center: center,
          minZoom:6,   
          zoom: 100,
          mapTypeControl:false,
          zoomControl: false,
          scaleControl: false,
      });
      //创建marker
      var marker = new qq.maps.Marker({
          position: center,
          map: map
      });
      //创建marker 自定义图标
      var anchor = new qq.maps.Point(0, 39),
          size = new qq.maps.Size(42, 68),
          origin = new qq.maps.Point(0, 0),
          markerIcon = new qq.maps.MarkerImage(
          "http://www.un-sv.com/dist/static/img/zuobiao.png",
          size, 
          origin,
          anchor
      );
      marker.setIcon(markerIcon);
    }
  },
  mounted() {
    var orderId = this.$route.query.id;
    this.$http.get('/api/order/show/'+orderId).then((res)=>{
        var data =  res.body.data;
        var id = data.deliver.id;
        this.$http.get('/api/locations/'+id).then(function(res){
          if(res.body.x){
            this.init(res.body.x,res.body.y);
          }else{
            this.init(30.599992,114.246023);
            //this.mapShow = false;
          }
        });
    });
  }
}
</script>


<style scoped>
#info{
    min-width:320px;
    padding-top:3px;
    overflow:hidden;
}
.btn{
    width:112px;
}
#container{
  min-width:320px;
  min-height:200px;
}
</style>